<template class="my">
  <div style="width: 1890px;height: 1044px;margin: -40px 0px -10px -10px;background-color: #ccc;">

    <div style="width: 1270px;float: left;">
      <!--  视频插件  -->
      <div style="width: 1260px;height: 680px;float: left;background-color: #fff;margin: 10px 0px 0px 10px;">
        <div id="divPlugin" class="plugin"></div>
      </div>
      <!--  *****第二排*****  -->
      <!--  云台  -->
      <div style="width: 308px;height: 335px;float: left;background-color: #fff;margin: 10px 0px 0px 10px;">
        <el-card class="box-card">
          监控列表
          <el-select v-model="videoIndex" @change="changeVideo" style="margin-left: 2px;">
            <el-option
              v-for="(videoInfo,videoIndex) in videoInfos"
              :key="videoInfo.id"
              :label="videoInfo.name"
              :value="videoIndex"
            ></el-option>
          </el-select>
        </el-card>
        <el-card class="box-card" v-if="isYtFlag" style="text-align: center;">
          <div>
            <div class="el-button-group ">
              <div class="el-button primary" @mousedown="mouseDownPTZControl(5)" @mouseup="mouseUpPTZControl">左上</div>
              <div class="el-button primary" @mousedown="mouseDownPTZControl(1)" @mouseup="mouseUpPTZControl">向上</div>
              <div class="el-button primary" @mousedown="mouseDownPTZControl(7)" @mouseup="mouseUpPTZControl">右上</div>
            </div>
            <br/>
            <div class="el-button-group ">
              <div class="el-button primary" @mousedown="mouseDownPTZControl(3)" @mouseup="mouseUpPTZControl">向左</div>
              <div class="el-button primary" @mousedown="mouseDownPTZControl(9)" @mouseup="mouseUpPTZControl">自动</div>
              <div class="el-button primary" @mousedown="mouseDownPTZControl(4)" @mouseup="mouseUpPTZControl">向右</div>
            </div>
            <br/>
            <div class="el-button-group ">
              <div class="el-button primary" @mousedown="mouseDownPTZControl(6)" @mouseup="mouseUpPTZControl">左下</div>
              <div class="el-button primary" @mousedown="mouseDownPTZControl(2)" @mouseup="mouseUpPTZControl">向下</div>
              <div class="el-button primary" @mousedown="mouseDownPTZControl(8)" @mouseup="mouseUpPTZControl">右下</div>
            </div>
          </div>
        </el-card>
        <el-card class="box-card" v-else style="text-align: center;pointer-events: none;background-color: #ccc;filter:alpha(Opacity=50);-moz-opacity:0.5;opacity: 0.5;">
          <div >
            <div class="el-button-group ">
              <div class="el-button primary" @mousedown="mouseDownPTZControl(5)" @mouseup="mouseUpPTZControl">左上</div>
              <div class="el-button primary" @mousedown="mouseDownPTZControl(1)" @mouseup="mouseUpPTZControl">向上</div>
              <div class="el-button primary" @mousedown="mouseDownPTZControl(7)" @mouseup="mouseUpPTZControl">右上</div>
            </div>
            <br/>
            <div class="el-button-group ">
              <div class="el-button primary" @mousedown="mouseDownPTZControl(3)" @mouseup="mouseUpPTZControl">向左</div>
              <div class="el-button primary" @mousedown="mouseDownPTZControl(9)" @mouseup="mouseUpPTZControl">自动</div>
              <div class="el-button primary" @mousedown="mouseDownPTZControl(4)" @mouseup="mouseUpPTZControl">向右</div>
            </div>
            <br/>
            <div class="el-button-group ">
              <div class="el-button primary" @mousedown="mouseDownPTZControl(6)" @mouseup="mouseUpPTZControl">左下</div>
              <div class="el-button primary" @mousedown="mouseDownPTZControl(2)" @mouseup="mouseUpPTZControl">向下</div>
              <div class="el-button primary" @mousedown="mouseDownPTZControl(8)" @mouseup="mouseUpPTZControl">右下</div>
            </div>
          </div>
        </el-card>
      </div>
      <!-- 点位数据 -->
      <div style="width: 524px;height: 335px;float: left;background-color: #fff;margin: 10px 0px 0px 10px;">
        <el-card class="box-card">
          <el-row>
            <el-col :span="12">{{collectPoint.name}}</el-col>
            <el-col :span="12">{{realDataObj['collecTimes']}}</el-col>
          </el-row>
        </el-card>
        <el-card class="box-card" style="height: 279px;">
          <div style="height: 262px;">
            <el-scrollbar style="height: 100%;">
              <el-row>
                <el-col v-for="pointParam in numPointParamObj" :key="pointParam.index" :span="12">
              <span v-if="pointParam.paramInfo.paramType=='num'">
                <el-card class="box-card">
                  {{pointParam.paramInfo.name}}：<span v-html="realDataObj['param'+pointParam.paramId]"></span> ({{pointParam.paramInfo.unit}})
                </el-card>
              </span>
                </el-col>
                <el-col v-for="pointParam in statePointParamObj" :key="pointParam.index" :span="12">
              <span v-if="pointParam.paramInfo.paramType=='state'">
                <el-card class="box-card">
                  {{pointParam.paramInfo.name}}：<span v-html="realDataObj['param'+pointParam.paramId]"></span>
                </el-card>
              </span>
                </el-col>
                <el-col v-for="pointParam in faultPointParamObj" :key="pointParam.index" :span="12">
              <span v-if="pointParam.paramInfo.paramType=='fault' && realDataObj[pointParam.paramId]">
                <el-card class="box-card">
                  {{pointParam.paramInfo.name}}：<span v-html="realDataObj['param'+pointParam.paramId]"></span>
                </el-card>
              </span>
                </el-col>
              </el-row>
            </el-scrollbar>
          </div>
        </el-card>
      </div>
      <!-- 气象站数据 -->
      <div style="width: 408px;height: 335px;float: left;background-color: #fff;margin: 10px 0px 0px 10px;">
        <el-card class="box-card">
          <el-row>
            <el-col :span="12">气象站</el-col>
            <el-col :span="12">{{realDataObjWeather['collecTimes']}}</el-col>
          </el-row>
        </el-card>
        <el-card class="box-card" style="height: 279px;">
          <el-row>
            <el-col v-for="(pointParam,i) in realDataObjWeather['pointParams']" :key="pointParam.index" :span="12" v-if="i<5">
          <span v-if="pointParam.paramInfo.paramType=='num'">
            <el-card class="box-card">
              {{pointParam.paramInfo.name}}：<span v-html="realDataObjWeather[pointParam.paramId]"></span> ({{pointParam.paramInfo.unit}})
            </el-card>
          </span>
            </el-col>
          </el-row>
        </el-card>
      </div>
    </div>

<!--  控制  -->
    <div style="width: 600px;height: 1025px;float: left;background-color: #fff;margin: 10px 0px 0px 10px;">

      <el-col v-for="pointParam in pointParamList" :key="pointParam.index" :span="12">
        <el-card :body-style="{ padding: '10px' }" style="margin: 10px;" >
          <el-row>
            <el-col :span="9">
              <el-card :body-style="{ padding: '2px' }" style="width: 86px;height: 86px;" >
                <img v-if="pointParam.paramInfo.pic == null || pointParam.paramInfo.pic == ''" :src="factorUrl" class="image" style="width: 80px;height: 80px;">
                <img v-else :src="pointParam.paramInfo.pic" class="image" style="width: 80px;height: 80px;">
              </el-card>
            </el-col>
            <el-col :span="15">
              <div style="line-height: 43px;font-size: 16px;">{{pointParam.paramInfo.name}}</div>
              <div style="line-height: 43px;"><el-button
                size="mini"
                type="primary"
                @click="setCrol(pointParam)"
              ><span style="font-size: 16px;">设置</span></el-button></div>
            </el-col>
          </el-row>
        </el-card>
      </el-col>

    </div>


  </div>
</template>

<script>
  import { queryRealData,realDataWeather } from "@/api/basic/hisMain";
  import { listPointParam } from "@/api/basic/pointParam";
  import { crolParam } from "@/api/basic/collectPoint";
  import { getVideoInfos } from "@/api/basic/videoInfo";
  import {WebVideoCtrl} from '@/assets/js/webVideoCtrl.js'

export default {
  name:'SiteDetail2',
  components: { },
  props: {
    collectPoint: {
      type: Object
    }
  },
  data() {
    return {
      factorUrl:require('@/assets/image/factor.jpeg'),
      crolParams:{
        pointId: this.collectPoint.id,
        mn:this.collectPoint.mn,
        dpParamId:null,
        value:1,
      },
      realDataObj:{},
      numPointParamObj:[],
      statePointParamObj:[],
      faultPointParamObj:[],
      realDataObjWeather:{ pointParams:[] },
      queryParams: {
        mn: this.collectPoint.mn,
        pointId: this.collectPoint.id
      },
      pointParamList: [],
      queryParamsParam: {
        pageNum: 1,
        pageSize: 100,
        pointId: this.collectPoint.id,
        paramType: 'crol'
      },
      videoInfos:[],
      videoIndex:null,
      // <!-- 视频监控
      hkvInfo: {
        ip: '',//海康威视摄像头/硬盘录像机的ip地址
        port: '',//海康威视摄像头/硬盘录像机的端口
        username: '',//海康威视摄像头/硬盘录像机的用户名
        password: '',//海康威视摄像头/硬盘录像机的密码
        channels: [],//海康威视摄像头/硬盘录像机的通道
      },
      hkvInfoOld: {//退出登入参数
        ip: '',//海康威视摄像头/硬盘录像机的ip地址
        port: '',//海康威视摄像头/硬盘录像机的端口
      },
      mySelectWnd: 0,//当前选中的窗口
      g_bPTZAuto: false,
      iProtocol: 1,
      loginLoading: false,
      startPlayLoading: false,
      iStreamType: 1,
      bZeroChannel: false,
      iRtspPort: 0,
      flag:true,
      isYtFlag:false
      // 视频监控 -->
    };
  },
  watch:{
    collectPoint(val) {
      this.queryParamsParam.pointId = this.collectPoint.id;
      this.queryParams.pointId = this.collectPoint.id;
      this.getSiteFactor();
      this.getRealData();
      this.getRealDataWeather();
      this.getVideoInfos();
    }
  },
  created() {
    this.getSiteFactor();
    this.getRealData();
    this.getRealDataWeather();
    this.getVideoInfos();
  },
  mounted: function () {
    this.videoInitPlugin(); // 初始化video界面
  },
  destroyed: function () {
    this.clickStopRealPlay();
    this.onLogout();
  },
  methods: {
    setCrol(pointParam){
      this.crolParams.dpParamId = pointParam.dpParamId;
      // crolParam(this.crolParams).then(response => {
      //   this.msgSuccess(response.data.msg)
      // });
      let _this = this;
      this.$confirm('是否确定控制设备?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(function() {
        return crolParam(this.crolParams);
      }).then(response => {
        this.msgSuccess(response.data.msg)
      }).catch(function() {});

    },
    /** 查询测点视频列表 */
    getVideoInfos() {
      this.flag = true;
      this.videoInfos = [];
      this.videoIndex = null;
      getVideoInfos({pointId:this.queryParams.pointId}).then(response => {
        this.videoInfos = response;
        if(this.videoInfos.length>0){
          this.videoIndex = 0;
          this.clkVideoInfo(this.videoInfos[0]);
        }
      });
    },
    clkVideoInfo(videoInfo){
      if(videoInfo.isYt == 'Y'){
        this.isYtFlag = true;
      }else{
        this.isYtFlag = false;
      }
      this.hkvInfo.ip = videoInfo.ipCode;
      this.hkvInfo.port = videoInfo.portCode;
      this.hkvInfo.username = videoInfo.account;
      this.hkvInfo.password = videoInfo.password;
      this.hkvInfo.channels = [];
      if(!this.flag){
        this.onLogoutAndLogin();
      }else{
        this.onLogin();
      }
      if(this.flag){
        this.flag = false;
      }
    },
    changeVideo(){
      this.clkVideoInfo(this.videoInfos[this.videoIndex]);
    },
    getRealData(){
      let that = this;
      this.realDataObj = {};
      this.numPointParamObj = []
      this.statePointParamObj = []
      this.faultPointParamObj = []
      queryRealData(this.queryParams).then(response => {
        this.realDataObj = response.data;
        this.realDataObj['pointParams'].forEach(function (pointParam) {
          if(pointParam.paramInfo.paramType=='num'){
            that.numPointParamObj.push(pointParam)
          }else if(pointParam.paramInfo.paramType=='state'){
            that.statePointParamObj.push(pointParam)
          }else if(pointParam.paramInfo.paramType=='fault'){
            that.faultPointParamObj.push(pointParam)
          }
        })
      });

    },
    getRealDataWeather(){
      this.realDataObjWeather = {};
      realDataWeather({}).then(response => {
        this.realDataObjWeather = response.data;
      });
    },
    getSiteFactor() {
      this.pointParamList = [];
      listPointParam(this.queryParamsParam).then(response => {
        this.pointParamList = response.rows;
      });

    },
// <!-- 视频监控
    onLogin() {
      let that = this;
      that.loginLoading = true;
      // 登录设备
      WebVideoCtrl.I_Login(that.hkvInfo.ip, that.iProtocol, that.hkvInfo.port, that.hkvInfo.username, that.hkvInfo.password, {
        async: true,
        success: function (xmlDoc) {
          // console.log('xmlDoc2', xmlDoc);//不能删除
          //TODO 获取通道信息
          setTimeout(function () {
            that.getChannelInfo();
            that.getDevicePort(that.hkvInfo.ip + "_" + that.hkvInfo.port);
          }, 10);
          setTimeout(function() {
            that.hkvInfoOld.ip = that.hkvInfo.ip;
            that.hkvInfoOld.port = that.hkvInfo.port;
            that.clickStartRealPlay();
          }, 500)
          that.loginLoading = false;
          // that.$message({
          //   showClose: true,
          //   message: '登录成功',
          //   type: 'success'
          // });
        },
        error: function () {
          that.loginLoading = false;
          // that.$message({
          //   showClose: true,
          //   message: '登录失败',
          //   type: 'error'
          // });
        }
      });
    },
    onLogoutAndLogin() {
      try {
        if(this.hkvInfoOld.ip != '' && this.hkvInfoOld.port!=''){
          // this.hkvInfo.channels = [];
          let szDeviceIdentify = this.hkvInfoOld.ip + "_" + this.hkvInfoOld.port;
          let iRet = WebVideoCtrl.I_Logout(szDeviceIdentify);
          if (0 == iRet) {
            // this.$message({
            //   showClose: true,
            //   message: '退出成功',
            //   type: 'success'
            // });
            this.hkvInfoOld.ip = '';
            this.hkvInfoOld.port = '';
            this.onLogin();
            return true;
          } else {
            // this.$message({
            //   showClose: true,
            //   message: '退出失败',
            //   type: 'error'
            // });
            return false;
          }
        }else{
          this.hkvInfoOld.ip = '';
          this.hkvInfoOld.port = '';
          this.onLogin();
          return true;
        }
      }catch(err){
        //console.log('错误！')
      }
    },
    onLogout() {
      if(this.hkvInfoOld.ip != '' && this.hkvInfoOld.port!=''){
        this.hkvInfo.channels = [];
        let szDeviceIdentify = this.hkvInfoOld.ip + "_" + this.hkvInfoOld.port;
        let iRet = WebVideoCtrl.I_Logout(szDeviceIdentify);
        if (0 == iRet) {
          // this.$message({
          //   showClose: true,
          //   message: '退出成功',
          //   type: 'success'
          // });
          this.hkvInfoOld.ip = '';
          this.hkvInfoOld.port = '';
          return true;
        } else {
          // this.$message({
          //   showClose: true,
          //   message: '退出失败',
          //   type: 'error'
          // });
          return false;
        }
      }
    },
    clickStartRealPlay() {
      this.clickStopRealPlay();
      // 开始预览
      let that = this;
      that.startPlayLoading = true;
      let szDeviceIdentify = that.hkvInfo.ip + "_" + that.hkvInfo.port;

      let j = that.hkvInfo.channels.length > 4 ? 4 : that.hkvInfo.channels.length;
      for (let i = 0; i < j; i++) {
        setTimeout(that.startRealPlay(szDeviceIdentify, i, that.hkvInfo.channels[i]), 500);
      }
      that.startPlayLoading = false;
    },
    videoInitPlugin: function () {
      let iRet = WebVideoCtrl.I_CheckPluginInstall();
      if (iRet === -1) {
        alert('您还未安装过插件，双击开发包目录里的WebComponentsKit.exe安装');
        return;
      }
      this.initPlugin()
    },
    initPlugin: function () {
      let that = this;

      WebVideoCtrl.I_InitPlugin(1260, 680, {
        bWndFull: true,//是否支持单窗口双击全屏，默I_CheckPluginInstall
        iWndowType: 2,
        myCbSelWnd: function (xmlStr) { //自己新增的方法
          let jsonObj = that.$x2js.xml2js(xmlStr);
          that.mySelectWnd = jsonObj.RealPlayInfo.SelectWnd;
          let szInfo = "当前选择的窗口编号：" + that.mySelectWnd;
          // console.log(szInfo);
        },
        cbInitPluginComplete: function () {
          WebVideoCtrl.I_InsertOBJECTPlugin("divPlugin");
          //设置窗口1X1
          WebVideoCtrl.I_ChangeWndNum(1);
          // 检查插件是否最新
          if (WebVideoCtrl.I_CheckPluginVersion() === -1) {
            alert("检测到新的插件版本，双击开发包目录里的WebComponentsKit.exe升级！");
            return;
          }
        }
      });
    },
    getDevicePort: function (szDeviceIdentify) {
      let oPort = WebVideoCtrl.I_GetDevicePort(szDeviceIdentify);
      this.iRtspPort = oPort.iRtspPort;
    },
    startRealPlay: function (szDeviceIdentify, iWndIndex, iChannelID) {
      let that = this;
      WebVideoCtrl.I_StartRealPlay(szDeviceIdentify, {
        iRtspPort: that.iRtspPort,
        iWndIndex: iWndIndex,
        iStreamType: 1,
        iChannelID: iChannelID,
        bZeroChannel: that.bZeroChannel,
        success: function () {
          // that.$notify({
          //   title: '成功',
          //   message: '开始预览通道' + iChannelID + '成功',
          //   type: 'success'
          // });
        },
        error: function (status, xmlDoc2) {
          // console.log(xmlDoc2)//不能删除
          // that.$notify({
          //   title: '失败',
          //   message: '开始预览通道' + iChannelID + '失败',
          //   type: 'error'
          // });
          if (status === 403) {
            // console.log("szInfo 设备不支持Websocket取流！");
          } else {
            // console.log("开始预览失败 ", status, xmlDoc2);
          }
        }
      });
    },
    clickStopRealPlay: function () {
      let j = this.hkvInfo.channels.length > 4 ? 4 : this.hkvInfo.channels.length;
      for (let i = 0; i < j; i++) {
        setTimeout(this.stopRealPlay(i), 1000);
      }
    },
    stopRealPlay: function (iWndIndex) {
      let that = this;
      WebVideoCtrl.I_Stop({
        iWndIndex: iWndIndex,
        success: function () {
          // that.$notify({
          //   title: '成功',
          //   message: '停止预览窗口' + iWndIndex + '成功',
          //   type: 'success'
          // });
        },
        error: function () {
          // that.$notify({
          //   title: '失败',
          //   message: '停止预览窗口' + iWndIndex + '失败',
          //   type: 'error'
          // });
        }
      });
    },
    // 获取通道，实际上可以根据自己的项目，获取数字通道，模拟通道，零通道中的一个或多个，不用全部获取（提高效率）
    getChannelInfo: function () {
      let that = this;
      let szDeviceIdentify = this.hkvInfo.ip + "_" + this.hkvInfo.port;
      // debugger
      // 数字通道
      that.hkvInfo.channels = [];
      WebVideoCtrl.I_GetDigitalChannelInfo(szDeviceIdentify, {
          async: false,
          mysuccess: function (xmlStr) {
            // console.log('mysuccess I_GetDigitalChannelInfo: ', xmlStr)
            let jsonObj = that.$x2js.xml2js(xmlStr)
            let list = jsonObj.InputProxyChannelStatusList.InputProxyChannelStatus;
            for (let x = 0; x < list.length; x++) {
              that.hkvInfo.channels.push(list[x].id);
            }
          },
          success: function (xmlDoc) {
          },
          error: function (status, xmlDoc) {
            // console.log("获取数字通道失败");
          }
        }
      );
      // TODO 模拟通道
      // 模拟通道
      WebVideoCtrl.I_GetAnalogChannelInfo(szDeviceIdentify, {
        async: false,
        mysuccess: function (xmlStr) {
          let jsonObj = that.$x2js.xml2js(xmlStr);
          // console.log("模拟通道mysuccess",xmlStr);
          // let list = jsonObj.VideoInputChannelList;
          // for (let x = 0; x < list.length; x++) {
          //   that.hkvInfo.channels.push(list[x].VideoInputChannel.id);
          // }
          var id = jsonObj.VideoInputChannelList.VideoInputChannel.id;
          that.hkvInfo.channels.push(id);
        },
        success: function (xmlStr) {
          // console.log("模拟通道success",xmlStr);
        },
        error: function (status, xmlDoc) {
          // console.log("模拟通道error",xmlDoc);
        }
      });
      // TODO 零通道
    },
    mouseDownPTZControl: function (iPTZIndex) {
      let oWndInfo = WebVideoCtrl.I_GetWindowStatus(this.mySelectWnd);
      if (oWndInfo !== null) {
        if (iPTZIndex === 9 && this.g_bPTZAuto) {
          // iPTZSpeed = 0;
        } else {
          this.g_bPTZAuto = false;
        }

        WebVideoCtrl.I_PTZControl(iPTZIndex, false, {
          iPTZSpeed: 4,
          mysuccess: function (xmlStr) {
            // console.log("I_PTZControl", xmlStr);
            if (iPTZIndex === 9 && this.g_bPTZAuto) {
              // console.log(oWndInfo.szDeviceIdentify + " 停止云台成功！mouseDown");
            } else {
              // console.log(oWndInfo.szDeviceIdentify + " 开启云台成功！mouseDown");
            }
            if (iPTZIndex === 9) {
              this.g_bPTZAuto = !this.g_bPTZAuto;
            }
          },
          error: function (status, xmlDoc) {
            // console.log(oWndInfo.szDeviceIdentify + " 开启云台失败！mouseDown", status, xmlDoc);
          }
        });
      }
    },
    mouseUpPTZControl: function () {
      let oWndInfo = WebVideoCtrl.I_GetWindowStatus(this.mySelectWnd);
      if (oWndInfo !== null) {
        WebVideoCtrl.I_PTZControl(1, true, {
          mysuccess: function (xmlStr) {
            // console.log(oWndInfo.szDeviceIdentify + " 停止云台成功！mouseUp", xmlStr)
          },
          error: function (status, xmlDoc) {
            // console.log(oWndInfo.szDeviceIdentify + " 停止云台失败！mouseUp", status, xmlDoc);
          }
        });
      }
    },
    // 视频监控 -->
  }
};
</script>
<style scoped>
  .plugin {
    width: 1260px;
    height: 680px;
  }

  .my-tag {
    margin-left: 3px;
  }

  .my-group-btn {
    margin-top: 5px;
  }
</style>
<style scoped lang="scss">
  ::v-deep{
    .el-scrollbar__wrap {
      overflow-x: hidden;
    }
  }
</style>
<style>
  .el-message-box__wrapper {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 1300px;
    right: 0;
  }
</style>
